<template>
  <div class="container">
    <div class="title">
      <h2>管理员管理</h2>
      <h5>一个管理员可以有多个角色组,左侧的菜单根据管理员所拥有的权限进行生成</h5>
    </div>
    <!-- 标题 -->
    <el-card class="box-card">
      <el-form :model="formData" class="demo-form-inline">
        <!-- 小区名称 -->
        <el-form-item prop="status" label="小区名称" size="small" style="margin-right: 23px;">
          <el-select v-model="formData.community_code" placeholder="请输入" style="margin-right: 0px;width:233px">
            <el-option v-for="item in community" :key="item.id" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <!-- 标题 -->
        <el-form-item prop="username" label="标题" size="small" style="margin-right: 23px;width:233px">
          <el-input v-model="formData.title" />
        </el-form-item>
        <!-- 类型 -->
        <el-form-item prop="status" label="类型" size="small" style="margin-right: 23px;">
          <el-select v-model="formData.multi" placeholder="请输入" style="margin-right: 0px;width:233px">
            <el-option label="单选" value="0" />
            <el-option label="多选" value="1" />
          </el-select>
        </el-form-item>
        <!-- 状态 -->
        <el-form-item prop="status" label="状态" size="small" style="margin-right: 23px;">
          <el-select v-model="formData.status" placeholder="请输入" style="margin-right: 0px;width:233px">
            <el-option label="关闭" value="0" />
            <el-option label="开启" value="1" />
          </el-select>
        </el-form-item>

        <el-form-item class="btn" style="margin-left: 200px;width:233px;padding-top: 30px;">
          <el-button style="float: right; padding: 10px 20px;" type="primary" @click="gettableData(formData)">查询</el-button>
          <el-button style="float: right; padding: 10px 20px;margin-right:10px" @click="gettableData()">重置</el-button>
        </el-form-item>
      </el-form>

    </el-card>
    <!-- 表格 -->
    <el-card class="tableCard">
      <el-button style="float: right; padding: 10px 20px;margin-right:80px" type="primary" size="small" :disabled="!checkBtnPermission('/ticket', 'create')" @click="openpop()">新增投票</el-button>
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="ID"
        />
        <el-table-column
          prop="community.name"
          label="小区名称"
        />
        <el-table-column
          prop="title"
          label="标题"
        />
        <el-table-column

          label="图片内容"
        >
          <template slot-scope="{row}">

            <div class="iamge">
              <img
                style="height:80px"
                :src="getPhoto(row.img_url)[0]"
                @click="previewImg(getPhoto(row.img_url))"
              >
            </div>

          </template>
        </el-table-column>
        <el-table-column
          prop="multi"
          label="类型"
        >
          <template slot-scope="{row}">
            {{ row.multi === 1 ? "多选" : "单选" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
        >
          <template slot-scope="{row}">
            {{ row.status === 1 ? "开启" : "关闭" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="options.length"
          label="选项个数"
        />
        <el-table-column
          label="创建者"
          width="180"
        >
          <template slot-scope="{row}">
            <span>{{ row.sys_user.nickname }} ({{ row.sys_user.username }})</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="start_time"
          label="开始时间"
          width="150"
        />
        <el-table-column
          prop="end_time"
          label="结束时间"
          width="150"
        />
        <el-table-column
          prop="create_time"
          label="创建时间"
          width="150"
        />

        <el-table-column
          fixed="right"
          label="操作"
          width="150"
        >
          <template slot-scope="{row}">
            <el-button type="text" size="small">查看</el-button>
            <el-button type="text" size="small" :disabled="!checkBtnPermission('/ticket', 'update')" @click="openpop(row.id)">编辑</el-button>
            <el-button type="text" size="small" :disabled="!checkBtnPermission('/ticket', 'destroy')" @click="getDelApi(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>
    <Popup ref="Popup" :community="community" />

  </div>

</template>

<script>
import { getResetApi, getInquireApi, getIdApi, getDelApi } from '@/api/ticket'
import { timestampTime } from '@/utils/index'
import Popup from '@/views/ticket/components/ticketPopup.vue'

export default {
  name: 'Ticket',
  components: {
    Popup
  },
  data() {
    return {
      imges: 'https://img2.baidu.com/it/u=2816097150,1223897210&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666', // 图片损坏的默认图片
      URL: 'http://124.223.14.236:8881',
      community: [],
      formData: {
        community_code: '',
        title: '',
        multi: '',
        status: ''
      },
      tableData: [{
        community: {}, // 小区名称
        community_code: '', // 小区code
        options: [], // 长度就是选项个数
        status: '', // 状态
        title: '', // 标题
        multi: '', // 类型
        sys_user: {}, // sys_user.nickname 超级系统员  sys_user.username admin
        create_time: '', // 创建时间
        end_time: '', // 结束时间
        start_time: '', // 开始时间
        id: '',
        img_url: ''

      }]

    }
  },

  created() {
    this.gettableData()
  },

  methods: {
    // 点击删除
    async getDelApi(id) {
      await this.$confirm('确定删除吗？')
      await getDelApi(id)
      this.$message.success('删除成功')
      this.gettableData()
    },
    // 图片预览
    previewImg(url) {
      // 单图预览
      if (url.length === 1) {
        this.$hevueImgPreview({
          url: url[0]
        })
      } else {
        // # 多图预览
        this.$hevueImgPreview({
          multiple: true, // 开启多图预览模式
          nowImgIndex: 0, // 多图预览，默认展示第二张图片
          imgList: url // 需要预览的多图数组
        })
      }
    },
    // 图片格式化
    getPhoto(val) {
      const imgAll = []
      if (val) {
        // 多图
        if (val.includes(',')) {
          return val.split(',').map((item) => this.URL + item)
        } else {
          // 单图
          imgAll.push(this.URL + val)
          return imgAll
        }
      } else {
        // 无图
        imgAll.push(this.imges)
        return imgAll
      }
    },
    async  openpop(id) {
      if (id) {
        // 编辑
        this.$refs.Popup.drawer = true
        this.$refs.Popup.text = '编辑'
        const res = await getIdApi(id)
        // 拿会数据的时候手动给options添加属性,打上唯一k值，这样可以删
        res.data.data.options.forEach((item, index) => {
          res.data.data.options[index].kd = index
          res.data.data.options[index].limit = 1
          // 如果有地址再拼接，没有就不管了，不然拼半张图片会有破损的图片出现
          if (item.img_url) {
            res.data.data.options[index].img = [{ url: `http://124.223.14.236:8881${item.img_url}` }]
          } else {
            res.data.data.options[index].img = []
          }
        })
        console.log(res.data.data.img_url)
        // 返回这个字段再转，否则会报错
        // 转数组给fileList做回显，自己也转数组，这样移除照片的时候自己本身的也可以移除
        if (res.data.data.img_url) {
          res.data.data.img_url = res.data.data.img_url.split(',')
          res.data.data.img_url.forEach(item => {
            this.$refs.Popup.fileList.push({ url: `http://124.223.14.236:8881${item}` })
          })
        } else {
          // 主要防止接口返回一个null，所以出行这种情况直接赋值一个空数组
          res.data.data.img_url = []
        }

        this.$refs.Popup.formData = res.data.data
      } else {
        // 新增
        this.$refs.Popup.drawer = true
        this.$refs.Popup.text = '新增'
      }
    },
    // 拼接图片地址
    imgUrl(url) {
      // http://124.223.14.236:8881/public/upload/user/2022-12-09/1670570744950860.png
      return `http://124.223.14.236:8881${url}`
    },
    // 发送请求渲染列表
    async gettableData(params) {
      if (!params) {
        this.formData = {
          community_code: '',
          title: '',
          multi: '',
          status: ''
        }
      }
      const { data } = await getInquireApi(params)
      timestampTime(data.data.rows)
      this.tableData = data.data.rows
      // 获取小区名称
      const res = await getResetApi()
      this.community = res.data.data
    }

  }
}
</script>

<style lang="scss" scoped>

.container{
  padding:40px;
  .title{
  display: flex;
  align-items: center;
  h2{
    margin-right:20px;
  }
  h5{
    font-weight: 400;
    color:#9c9c9d;
    vertical-align: middle;
  }
}
.demo-form-inline{
  display: flex;
}
.el-form-item{
  margin-right:73px;
}
.btn{
  padding-top:40px;
}
.box-card{
  margin-bottom:10px;
}
}

</style>

